<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
  v-bind 绑定style属性  实现样式的动态操作
  对象{css属性名:属性值}
  v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。
  CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
  数组
    [样式对象1，样式对象2]

-->
<div id="app">
    <p style="color: red;font-size: 30px">vue 操作节点对象的Style属性</p>

    <p :style="{color:'red', fontSize:'30px'}">vue 操作节点对象的Style属性2</p>
    <p :style="{color:'red','font-size':'30px'}">vue 操作节点对象的Style属性3</p>
    <p :style="{color:color, fontSize:fontSize+'px'}">vue 操作节点对象的Style属性4</p>
    <p :style="styleObject">vue 操作节点对象的Style属性5</p>
    <p :style="[styleObject,styleObject2]">vue 操作节点对象的Style属性6</p>
    <button @click="changsize1">改变文字大小+</button>
    <button @click="changsize2">改变文字大小-</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            color: 'red',
            fontSize: 30,
            styleObject:{
                color: 'blue',
                fontSize: '30px'
            },
            styleObject2:{
                textAlign:'center'
            }
        },
        methods: {
            changsize1() {
                this.fontSize++
            },
            changsize2() {
                this.fontSize--
            }
        }
    })
</script>
</body>
</html>